/**
 * Created by mac on 2017/7/14.
 */
/**
 * Created by mac on 2017/7/4.
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Dimensions,
    ScrollView,
    Image,
    ActivityIndicator,
    PanResponder
} from 'react-native';

import {CachedImage} from "react-native-img-cache";

//cat 数据
let middleAdvsData = require('./data.json').data.recommendChannel.recommendActivitys;

var screenW = Dimensions.get('window').width;

import SectionBar from './SectionBar';

//图片边距
let paddingWidth = 5;
//图片宽度
let imageWidth = 232
//图片高度
let imageHeight = 163
//图片视图宽度
let viewWidth = imageWidth + paddingWidth*2;
//图片视图高度
let viewHeight = imageHeight + paddingWidth*2;
// 图片个数
let count = 3;

let left = 0;

let touchViewIndex = 0;



export default class ScrollCard extends Component{

    // 构造
    constructor(props) {
        super(props);
        this.renderDetailView=this.renderDetailView.bind(this);

        let data = middleAdvsData.items;

        let images = [];
        for (let i=0;i<data.length;i++){

            let scale = i==1?1:0.9;
            images.push(scale);
        }

        // 初始状态
        this.state = {
            images:images,
            left:(screenW-viewWidth)/2-viewWidth,

        };
    }


    componentWillMount() {


        this._panResponder = PanResponder.create({
            // 要求成为响应者：
            onStartShouldSetPanResponder: (evt, gestureState) => true,
            onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
            onMoveShouldSetPanResponder: (evt, gestureState) => true,
            onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,

            onPanResponderGrant: (evt, gestureState) => {
                // 开始手势操作。给用户一些视觉反馈，让他们知道发生了什么事情！

                // gestureState.{x,y} 现在会被设置为0

                 left = this.state.left;
            },
            onPanResponderMove: (evt, gestureState) => {
                // 最近一次的移动距离为gestureState.move{X,Y}

                if(left == ((screenW-viewWidth)/2-viewWidth)-(count-2)*viewWidth){

                    if(gestureState.dx<0){
                        return;
                    }
                }

                let x =  left+gestureState.dx;
                if (x < ((screenW-viewWidth)/2-viewWidth)-(count-2)*viewWidth)
                {
                    x = (screenW-viewWidth)/2-viewWidth;
                }
                else if(x >(screenW-viewWidth)/2){
                    x = (screenW-viewWidth)/2;

                }

                let images = this.state.images;

                // 触摸屏幕的点
                if(gestureState.x0 < (screenW-viewWidth)/2){
                    // 在左半个视图

                    if(left <0) {
                        touchViewIndex =parseInt(-left / viewWidth);
                    }

                    if(gestureState.dx > 0){

                        images[touchViewIndex] = 0.9 + gestureState.dx/viewWidth*0.01;
                        images[touchViewIndex +1]= 1 - gestureState.dx/viewWidth*0.01;
                    }
                    else{

                        images[touchViewIndex +1]= 1 - gestureState.dx/viewWidth*0.01;
                        if(images.length >(touchViewIndex+2)){
                            images[touchViewIndex +2]= 0.9 + gestureState.dx/viewWidth*0.01;
                        }

                    }





                }
                else if (gestureState.x0 >(screenW-viewWidth)/2 && gestureState.x0 < ((screenW-viewWidth)/2+viewWidth)){
                    // 在中间那个视图
                    if(left <0) {
                        touchViewIndex =parseInt( -left / viewWidth +1);
                    }
                    else {
                        touchViewIndex = 0;
                    }

                    if(gestureState.dx > 0){

                        images[touchViewIndex] = 1.0 - gestureState.dx/viewWidth*0.01;
                        if(touchViewIndex > 0) {
                            images[touchViewIndex - 1] = 0.9 + gestureState.dx / viewWidth * 0.01;
                        }
                    }
                    else{

                        images[touchViewIndex] = 1 - gestureState.dx / viewWidth * 0.01;
                        if(images.length >(touchViewIndex+1)) {
                            images[touchViewIndex + 1] = 0.9 + gestureState.dx / viewWidth * 0.01;
                        }

                    }


                }
                else {
                    // 在右半个视图

                    if(left <0) {
                        touchViewIndex = -left / viewWidth +2;
                    }
                    else {
                        touchViewIndex = 1;
                    }


                    if(gestureState.dx > 0){

                        if(touchViewIndex > 1) {
                            images[touchViewIndex-1] = 1.0 - gestureState.dx/viewWidth*0.01;
                            images[touchViewIndex - 2] = 0.9 + gestureState.dx / viewWidth * 0.01;
                        }
                    }
                    else{

                        images[touchViewIndex] = 0.9 + gestureState.dx / viewWidth * 0.01;
                        images[touchViewIndex - 1] = 1- gestureState.dx / viewWidth * 0.01;

                    }

                }



                 this.setState({
                        left:x,
                        images:images
                     })
                console.log(x);

                // 从成为响应者开始时的累计手势移动距离为gestureState.d{x,y}
            },
            onPanResponderTerminationRequest: (evt, gestureState) => true,
            onPanResponderRelease: (evt, gestureState) => {

                if(Math.abs(gestureState.dx)>60){

                    if(gestureState.dx >= 0){
                        if(left <(screenW-viewWidth)/2) {
                            left = left + viewWidth;
                        }

                        this.setState({
                            left:left,
                        })
                    }
                    else {

                        if(left > ((screenW-viewWidth)/2-viewWidth)-(count-2)*viewWidth)
                        {
                            left = left - viewWidth;

                        }

                        this.setState({
                            left:left,
                        })

                    }
                }
                else {

                    this.setState({
                        left:left,
                    })

                }

                let images = this.state.images;

                if(left>0){
                    images[0] = 1.0;
                    images[1] = 0.9;
                }
                else {
                    console.log('left='+left);
                    let index =  parseInt(-left/viewWidth+1);
                    images[index] = 1.0;
                    images[index - 1]=0.9;
                    if(images.length>(index+1)){
                        images[index+1]=0.9;
                    }
                }

                this.setState({
                    images:images
                })

                // 用户放开了所有的触摸点，且此时视图已经成为了响应者。
                // 一般来说这意味着一个手势操作已经成功完成。
            },
        onPanResponderTerminate: (evt, gestureState) => {
            // 另一个组件已经成为了新的响应者，所以当前手势将被取消。
            if(Math.abs(gestureState.dx)>60){

                if(gestureState.dx >= 0){
                    if(left <(screenW-viewWidth)/2) {
                        left = left + viewWidth;
                    }

                    this.setState({
                        left:left,
                    })
                }
                else {

                    if(left > ((screenW-viewWidth)/2-viewWidth)-(count-2)*viewWidth)
                    {
                        left = left - viewWidth;

                    }

                    this.setState({
                        left:left,
                    })

                }
            }
            else {

                this.setState({
                    left:left,
                })

            }

            let images = this.state.images;
            console.log('left='+left);

            if(left>0){
                images[0] = 1.0;
                images[1] = 0.9;
            }
            else {
                let index =  parseInt(-left/viewWidth+1);
                images[index] = 1.0;
                images[index - 1]=0.9;
                if(images.length>(index+1)){
                    images[index+1]=0.9;
                }
            }

            this.setState({
                images:images
            })
        }
        });

    }



    renderDetailView(allData){



        let data = allData.items;

        var row= [];

        if(data.length === 0){
            return (
                <View style={{flex:1}}>
                    <ActivityIndicator size='large' color='gray'/>
                </View>
            )
        }

        for (let i=0;i<data.length;i++){



            row.push(
                <View key={i} style={{padding:5,flex:1,justifyContent:'center', alignItems:'center'}}>
                    <CachedImage  style={{
                        minWidth:imageWidth*0.9,
                        maxWidth:imageWidth,
                        minHeight:imageHeight*0.9,
                        maxHeight:imageHeight,
                        width:imageWidth,
                        height:imageHeight,
                        transform:[{scaleX:this.state.images[i]},{scaleY:this.state.images[i]}]
                    }}
                                 source={{uri:data[i].pic}}/>
                </View>
            )

        }

        return(

            <View {...this._panResponder.panHandlers} style={{top:30,flexDirection:'row',width:data.length*viewWidth,height:viewHeight,position:'absolute',left:this.state.left}}
                        ref={c=>{this.view=c}}

            >
                {row}

            </View>
        )

    }

    render(){

        return (
            <View style={{width:screenW,height:203}}>
                <SectionBar  title={middleAdvsData.title}/>
                {this.renderDetailView(middleAdvsData)}
            </View>
        )
    }
}